<template>
  <div class="record-container">
    <div class="fix-head">
      <h2>选择会议沟通记录</h2>
      <van-search
        v-model="searchValue"
        placeholder="搜索"
        input-align="center"
        shape="round"
        @update:model-value="onSearchValueChanged"
      />
    </div>
    <van-list
      class="list-view"
      v-model:loading="loading"
      :finished="noMoreData"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <meetRecordCell
        v-for="item of list"
        :item="item"
        :checked="item === checkedRecord"
        @click="onClickItem(item)"
      />
    </van-list>
    <div class="bottom-view">
      <van-button
        type="primary"
        class="confirm-btn"
        color="#436BFF"
        :loading="loading"
        @click="onConfirm"
        >确定</van-button
      >
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import meetRecordCell from "./meetRecordCell.vue";
import { useProductStore } from "@/store";
import debounce from "@/utils/debounce";
import { showLoadingToast, closeToast } from "vant";

const emit = defineEmits(["close"]);
const store = useProductStore();

// 数据列表
const list = computed(() => store.meetRecords);
const searchValue = ref("");
const page = ref(1);
const noMoreData = ref(false);
const loading = ref(false);
async function onLoad() {
  // if (loading.value) return;
  loading.value = true;
  const res = await store.getMeetRecodsAction(page.value, searchValue.value);
  console.log("getMeetRecodsAction: ", res);
  loading.value = false;
  noMoreData.value = res.datas.length < 20;
}

const checkedRecord = computed(() => store.checkedRecord);

function onClickItem(item) {
  store.onCheckedRecordChange(item);
}

async function onConfirm() {
  if (!checkedRecord.value) return;
  showLoadingToast({
    message: "加载中...",
    forbidClick: true,
  });
  const res = await store.getCustomerRequireMentAction(checkedRecord.value);
  closeToast();
  emit("close");
}

function onSearchValueChanged() {
  debounce(() => {
    onLoad();
  });
}
</script>

<style lang="less" scoped>
.record-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;

  .fix-head {
    // position: sticky;
    // left: 0;
    // top: 0;
    background-color: white;
    width: 100%;

    // z-index: 100;
    padding-top: 12px;
  }

  .list-view {
    padding: 0 20px;
    margin-top: 4px;
    flex: 1;
    background: white;
    overflow: auto;
  }

  h2 {
    font-size: 16px;
    color: #262626;
    font-weight: 500;
    margin: auto 0;
    text-align: center;
  }

  .session-head-view {
    background-color: #f4f5f6;
    height: 36px;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding-left: 20px;
  }

  .bottom-view {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 9px;

    .confirm-btn {
      width: 90%;
      height: 36px;
      border-radius: 18px;
    }
  }
}
</style>
